<template>
  <div class="viewContain">
    <el-form :model="listQuery" size="small" label-width="100px">
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="用户姓名:">
            <el-input
              v-model="listQuery.name"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label="登录账号:">
            <el-input
              v-model="listQuery.userName"
              placeholder="请输入"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }">
          <el-form-item label-width="20px">
            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
            <el-button size="mini" type="primary" plain @click="handleReload">重置</el-button>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 6 }" align="right">
          <el-form-item>
            <el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 新增用户 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="900px"
      :close-on-click-modal="false"
      @close="closeDialog"
    >
      <el-form ref="formData" :model="formData" size="small" label-width="150px" :rules="rules" style="padding-right: 60px">
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="用户姓名 :" prop="name">
              <el-input v-model="formData.name" placeholder="请输入用户姓名" clearable style="width: 100%" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="登录账号 :" prop="userName">
              <el-input v-model="formData.userName" placeholder="请输入登录账号" clearable style="width: 100%" maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="身份证号 :" prop="idCard">
              <el-input v-model="formData.idCard" placeholder="请输入身份证号" clearable style="width: 100%" maxlength="18" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item v-if="isPassword" label="登录密码 :" prop="password">
              <el-input v-model="formData.password" type="password" placeholder="请输入登录密码" clearable style="width: 100%" maxlength="16" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="手机 :" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入手机" clearable style="width: 100%" maxlength="11" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item v-if="isPassword" label="确认密码 :" prop="checkPassword">
              <el-input v-model="formData.checkPassword" type="password" placeholder="请再次输入密码" clearable style="width: 100%" maxlength="16" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="所属区域 :" prop="areaInfo">
              <el-input v-model="formData.areaInfo" placeholder="请输入所属区域" clearable style="width: 100%" disabled maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="性别 :" prop="sex">
              <el-radio-group v-model="formData.sex">
                <el-radio :label="'1'">男</el-radio>
                <el-radio :label="'2'">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="所属机构 :" prop="orgId">
              <el-cascader
                v-model="formData.orgId"
                :options="areaList"
                clearable
                :props="casProps"
                style="width: 100%"
                @change="handleChange"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="地址 :" prop="address">
              <el-input v-model="formData.address" placeholder="请输入地址" clearable style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :xl="{ span: 24 }">
            <el-form-item label="描述 :" prop="description">
              <el-input v-model="formData.description" type="textarea" :rows="2" placeholder="请输入描述" clearable maxlength="85" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="状态 :" prop="status">
              <el-radio-group v-model="formData.status">
                <el-radio :label="'1'">正常</el-radio>
                <el-radio :label="'2'">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :xl="{ span: 24 }">
            <el-form-item label="用户角色选择 :" prop="roleId">
              <el-checkbox-group v-model="formData.roleId">
                <el-checkbox
                  v-for="item in roleList"
                  :key="item.id"
                  :label="item.id"
                >
                  {{ item.name }}
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button size="small" type="primary" plain @click="handleClose">取消</el-button>
        <el-button v-if="isPassword" size="small" type="primary" @click="handleCreateUser">确定</el-button>
        <el-button v-else size="small" type="primary" @click="handleUpdateUser">确定</el-button>
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog
      :title="dialogTitle_password"
      :visible.sync="dialogFormVisible_password"
      :close-on-click-modal="false"
      width="400px"
    >
      <el-form ref="formData_password" :model="formData_password" size="small" label-width="120px" :rules="rules_password">
        <el-form-item label="用户姓名ID :">
          <el-input v-model="formData_password.userId" clearable style="max-width:200px" disabled />
        </el-form-item>
        <el-form-item label="用户姓名 :">
          <el-input v-model="formData_password.name" clearable style="max-width:200px" disabled />
        </el-form-item>
        <el-form-item label="登录账号 :">
          <el-input v-model="formData_password.userName" clearable style="max-width:200px" disabled />
        </el-form-item>
        <el-form-item label="重置初始密码 :" prop="newPassword">
          <el-input ref="password" v-model="formData_password.newPassword" :type="passwordType" clearable style="max-width:200px" />
          <span class="show-pwd" @click="showPwd">
            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item>
          <el-button size="small" plain type="primary" @click="handleClose_password">取消</el-button>
          <el-button size="small" type="primary" @click="handleSave_password">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog
      :title="dialogTitle_detail"
      :visible.sync="dialogFormVisible_detail"
      :close-on-click-modal="false"
      width="800px"
    >
      <el-form :model="detailInfo" size="small" label-width="150px" style="padding-right: 60px">
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="用户姓名 :">
              {{ detailInfo.name }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="登录账号 :">
              {{ detailInfo.userName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="身份证号 :">
              {{ detailInfo.idCard }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="手机 :">
              {{ detailInfo.phone }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="所属区域 :">
              {{ detailInfo.areaName }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="性别 :">
              <span v-if="detailInfo.sex === '1'">男</span>
              <span v-if="detailInfo.sex === '2'">女</span>
              <span v-if="detailInfo.sex === '3'">未知</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="所属机构 :">
              {{ detailInfo.orgName }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="地址 :">
              {{ detailInfo.address }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="状态 :">
              <span v-if="detailInfo.status === '1'">正常</span>
              <span v-if="detailInfo.status === '2'">停用</span>
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="用户角色 :">
              {{ detailInfo.roleName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="创建时间 :">
              {{ detailInfo.createTime }}
            </el-form-item>
          </el-col>
          <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 12 }" :xl="{ span: 12 }">
            <el-form-item label="更新时间 :">
              {{ detailInfo.updateTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 24 }" :xl="{ span: 24 }">
            <el-form-item label="描述 :">
              {{ detailInfo.description }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button size="small" type="primary" @click="dialogFormVisible_detail=false">关闭</el-button>
      </div>
      <!-- <div class="detailInfo">
        <p>用户姓名:{{ detailInfo.name }}</p>
        <p>登录帐号:{{ detailInfo.userName }}</p>
        <p>所属区域:{{ detailInfo.areaName }}</p>
        <p>所属机构:{{ detailInfo.orgName }}</p>
        <p>身份证号:{{ detailInfo.idCard }}</p>
        <p>性别:
          <span v-if="detailInfo.sex === '1'">男</span>
          <span v-if="detailInfo.sex === '2'">女</span>
          <span v-if="detailInfo.sex === '3'">未知</span>
        </p>
        <p>手机:{{ detailInfo.phone }}</p>
        <p>地址:{{ detailInfo.address }}</p>
        <p>状态:
          <span v-if="detailInfo.status === '1'">正常</span>
          <span v-if="detailInfo.status === '2'">停用</span>
        </p>
        <p>用户角色:{{ detailInfo.roleName }}</p>
        <p>创建时间:{{ detailInfo.createTime }}</p>
        <p>更新时间:{{ detailInfo.updateTime }}</p>
        <p>描述:{{ detailInfo.description }}</p>
      </div> -->
    </el-dialog>
    <el-table
      ref="table"
      v-loading="loading"
      fit
      stripe
      :data="tableData"
      border
      size="mini"
    >
      <!-- <el-table-column type="selection" /> -->
      <el-table-column align="center" label="序号" type="index" width="50">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" align="center" label="用户姓名" />
      <el-table-column prop="userName" align="center" label="登录账号" />
      <el-table-column prop="status" align="center" label="用户状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status === '1'">正常</span>
          <span v-else-if="scope.row.status === '2'">停用</span>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" align="center" label="用户角色" />
      <el-table-column align="center" fixed="right" label="操作" width="250">
        <template slot-scope="scope">
          <el-button class="text-button" size="mini" @click="handleRefreshPassword(scope.row.id)">重置密码</el-button>
          <el-button class="text-button" size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button class="text-button" size="mini" @click="handleDetail(scope.row.id)">详情</el-button>
          <el-button class="text-button el-button--danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total-count="totalCount"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { getUserInfo, updatePassword, getRoleList, getAreaList, getDistinctInfo } from '@a/core/user.js'
import pagination from '@/components/pagination/index.vue'
import { validName, validIDCard, validPhone, validPassword } from '@u/validate'
import aesUtil from '@/utils/aesUtil'
import { mapGetters } from 'vuex'
import { commonMixin } from '@v/mixin/commonMixin.js'
import ComApiUrl from '@a/comomApi.js'
export default {
  components: { pagination },
  mixins: [commonMixin],
  data() {
    const validateUserName = (rules, value, callback) => {
      if (!validName(value)) {
        callback(new Error('只允许字母数字，且不能以数字开头'))
      } else {
        callback()
      }
    }
    const validateIdCard = (rules, value, callback) => {
      if (!validIDCard(value)) {
        callback(new Error('身份证号格式输入有误!'))
      } else {
        callback()
      }
    }
    const validatePhone = (rules, value, callback) => {
      if (!validPhone(value)) {
        callback(new Error('手机号格式输入有误!'))
      } else {
        callback()
      }
    }
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!validPassword(value)) {
        callback(new Error('请输入包含数字、字母的8-16位的密码'))
      } else {
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formData.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      comApiUrlList: new ComApiUrl('/core/api/user/getPageUserList'),
      comApiUrlDelete: new ComApiUrl('/core/api/user/delUserInfoById/'),
      comApiUrlAdd: new ComApiUrl('/core/api/user/insertUserInfo'),
      comApiUrlUpdate: new ComApiUrl('/core/api/user/updateUserInfoById'),
      roleList: [], // 角色列表
      passwordType: 'password',
      formData: {
        id: '',
        name: '', // 用户姓名
        userName: '', // 登录账号
        idCard: '', // 身份证号
        password: '', // 登录密码
        checkPassword: '', // 检验密码
        phone: '', // 手机
        areaId: '', // 所属区域(暂时先写死)
        sex: '', // 性别
        orgId: '', // 所属机构
        address: '', // 地址
        status: '', // 状态
        description: '', // 描述
        roleId: [], // 用户角色id
        areaInfo: '' // 区域信息回显
      },
      isPassword: true,
      formData_password: {
        userId: '',
        name: '',
        userName: '',
        newPassword: ''
        // oldPassword: ''
      },
      dialogTitle: '',
      dialogTitle_password: '重置密码',
      dialogFormVisible: false,
      dialogFormVisible_password: false,
      dialogTitle_detail: '用户详情',
      dialogFormVisible_detail: false,
      detailInfo: {},
      casProps: {
        checkStrictly: true, // 是否严格的遵守父子节点不互相关联
        emitPath: false, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
        value: 'orgId', // 指定选项的值为选项对象的某个属性值
        label: 'name' // 指定选项标签为选项对象的某个属性值
      },
      rules: { // 用户新增
        name: [
          { required: true, message: '用户姓名不能为空!', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '登录账号不能为空!', trigger: 'blur' },
          { validator: validateUserName, trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '身份证账号不能为空!', trigger: 'blur' },
          { validator: validateIdCard, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不能为空!', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空!', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '确认密码不能为空!', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态不能为空!', trigger: 'blur' }
        ],
        orgId: [
          { required: true, message: '所属机构不能为空!', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '用户角色不能为空!', trigger: 'blur' }
        ]
      },
      rules_password: { // 重置密码
        newPassword: [
          { required: true, message: '新密码不能为空!', trigger: 'blur' }
        ]
      },
      userInfo: {} // 登录人员信息
    }
  },
  computed: {
    ...mapGetters(['areaList'])
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.getList()
  },
  methods: {
    // 新增
    handleAdd() {
      this.dialogFormVisible = true
      this.dialogTitle = '新增用户'
      this.formData.roleId = []
      this.isPassword = true
      // 获取角色列表
      getRoleList({}).then(res => {
        // console.log(res)
        if (res.code === 0) {
          this.roleList = res.data.list
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    // 新增保存
    handleCreateUser() {
      this.$refs.formData.validate(valide => {
        if (valide) {
          if (!this.formData.roleId.length) {
            this.$message({
              type: 'error',
              message: '用户角色不能为空'
            })
            return
          } else {
            this.formData.password = aesUtil.AES_Encrypt(this.formData.password)
            this.formData.checkPassword = aesUtil.AES_Encrypt(this.formData.checkPassword)
            this.create()
          }
        }
        // valide ? this.create() : this.formData.password = ''
      })
    },
    // 修改
    handleEdit(id) {
      this.dialogFormVisible = true
      this.dialogTitle = '修改用户'
      this.isPassword = false
      getUserInfo(id).then(res => {
        if (res.code === 0) {
          this.formData = res.data
          console.log(this.formData)
          this.getDistinct(res.data.orgId)
          const roleList111 = res.data.roleId.split(',')
          // 获取角色列表
          getRoleList({}).then(res => {
            if (res.code === 0) {
              this.roleList = res.data.list
              const roleId = []
              for (var i = 0; i < roleList111.length; i++) {
                this.roleList.forEach(item => {
                  if (roleList111[i] === item.id) {
                    roleId.push(item.id)
                  }
                })
              }
              this.formData.roleId = roleId
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              })
            }
          })
        }
      })
    },
    // 修改保存
    handleUpdateUser() {
      this.formData.password = aesUtil.AES_Encrypt(this.formData.password)
      this.formData.checkPassword = aesUtil.AES_Encrypt(this.formData.checkPassword)
      this.$refs.formData.validate(valide => {
        valide ? this.update() : ''
      })
    },
    // 详情
    handleDetail(id) {
      this.dialogFormVisible_detail = true
      console.log(id)
      getUserInfo(id).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.detailInfo = res.data
          this.detailInfo.createTime = res.data.createTime.split(' ')[0]
          this.detailInfo.updateTime = res.data.updateTime.split(' ')[0]
        } else if (res.code === -1) {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    },
    // 所属机构级联选择
    handleChange(orgId) {
      this.getDistinct(orgId)
    },
    // 获取所属区域信息
    getDistinct(orgId) {
      getDistinctInfo(orgId).then(res => {
        const distinctId = res.data.distinctId
        this.formData.areaId = distinctId
        // 根据区域id获取区域级联信息
        getAreaList(distinctId).then(res => {
          // console.log(res)
          if (res.code === 0) {
            const arr = []
            res.data.forEach(item => arr.push(item.name))
            this.formData.areaInfo = arr.join('/')
            this.$forceUpdate()
          } else if (res.code === -1) {
            this.$message({
              message: res.msg,
              type: 'warning'
            })
          }
        })
      })
    },
    // 是否显示初始密码
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 重置密码
    handleRefreshPassword(id) {
      this.dialogFormVisible_password = true
      getUserInfo(id).then(res => {
        console.log(res)
        if (res.code === 0) {
          this.formData_password.userId = res.data.id
          this.formData_password.name = res.data.name
          this.formData_password.userName = res.data.userName
        } else if (res.code === -1) {
          this.$message({
            message: res.msg,
            type: 'warning'
          })
        }
      })
    },
    // 保存--重置密码
    handleSave_password() {
      delete this.formData_password.userName
      this.formData_password.newPassword = aesUtil.AES_Encrypt(this.formData_password.newPassword)
      this.$refs.formData_password.validate(valide => {
        console.log(this.formData_password)
        updatePassword(this.formData_password).then(res => {
          console.log(res)
          if (res.code === 0) {
            this.dialogFormVisible_password = false
            this.getList()
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      })
    },
    // 关闭--重置密码
    handleClose_password() {
      this.passwordType = 'password'
      this.formData_password.newPassword = ''
      this.$refs.formData_password.resetFields()
      this.dialogFormVisible_password = false
    }
  }
}
</script>
<style lang="scss" scoped>
.detailInfo {
  margin-left: 50px;
  p {
    margin: 10px 0;
  }
}
</style>
